<template>
  <div>
    <el-form-item label="省">
      <el-select v-model="delivery_address.pid" placeholder="请选择" @change="provinces_change">
        <el-option label="--请选择--" value=""></el-option>
        <el-option v-for="p in provinces" :label="p.name" :value="p.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="市">
      <el-select v-model="delivery_address.cid" placeholder="请选择" @change="citys_change">
        <el-option label="--请选择--" value=""></el-option>
        <el-option v-for="c in citys" :label="c.name" :value="c.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="区">
      <el-select v-model="delivery_address.rid" placeholder="请选择">
        <el-option label="--请选择--" value=""></el-option>
        <el-option v-for="r in regions" :label="r.name" :value="r.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-input v-model="delivery_address.address" placeholder="请输入详细地址"></el-input>
    </el-form-item>
  </div>
</template>

<script>
    export default {
        name: "Addr",
        data(){
          return {
            provinces:[],
            citys:[],
            regions:[],
            delivery_address:{
              uid:sessionStorage.getItem("id"),//获取当前登录的用户id
              pid:"",
              cid:"",
              rid:"",
              address:""
            },
          }
        },
        methods:{
          getAllProvince(delivery_address){
              //检查父组件是否传来数据
              if(delivery_address!=undefined) {
                //父组件传来数据，添加到对象内
                this.delivery_address.pid = delivery_address.pid;
                this.delivery_address.cid = delivery_address.cid;
                this.delivery_address.rid = delivery_address.rid;
                this.delivery_address.address = delivery_address.address;
              }
            //调用异步，查询所有的省
            this.$axios.post("province/getAllprovince.action",null).
            then((response)=> {   //异步调用成功执行
              //将查询到的所有省存入对象数组中
              this.provinces=response.data;
            }).catch(function (error) {//异步调用失败执行
              alert(error);
            });
          },
          provinces_change(){
            //清空市区的数组内容
            this.citys=[];
            this.regions=[];
            //调用异步，根据省id，获取该省下所有的市
            let params = new URLSearchParams();
            params.append("id",this.delivery_address.pid);
            this.$axios.post("city/queryByPid.action",params).
            then((response)=> {   //异步调用成功执行
              //将查询到的所有市存入对象数组中
              this.citys=response.data;
            }).catch(function (error) {//异步调用失败执行
              alert(error);
            });
          },
          citys_change(){
            //调用异步，根据省id，获取该省下所有的市
            let params = new URLSearchParams();
            params.append("id",this.delivery_address.cid);
            this.$axios.post("region/queryByPid.action",params).
            then((response)=> {   //异步调用成功执行
              //将查询到的所有市存入对象数组中
              this.regions=response.data;
            }).catch(function (error) {//异步调用失败执行
              alert(error);
            });
          }
        },
        created(){
        //加载前，异步获取数据
        this.getAllProvince();
      }
    }
</script>

<style scoped>

</style>
